<template>
  <n-modal
    v-model:show="modalData.show"
    preset="card"
    :title="modalData.appletName"
    :bordered="false"
    :style="{ width: '520px'}"
  >
    <n-spin :show="loading">
      <div class="box">
        <n-image class="preview-img" :src="mpQrcode" />
      </div>
    </n-spin>
  </n-modal>
</template>

<script setup lang="ts">
  import { useStore } from '@/store'
  import { useRouter } from 'vue-router'
  import { onMounted, ref } from 'vue'
  import { NModal, NImage, NSpin } from 'naive-ui'

  const store = useStore()
  const router = useRouter()
  const mpQrcode = ref('')
  const loading = ref(false)

  const props = defineProps({
    modalData: {
      type: Object,
      default: () => ({})
    },
    path: {
      type: String,
      default: 'pages/index/index'
    }
  })

  onMounted(() => {
    getMpQrcode()
  })

  async function getMpQrcode() {
    loading.value = true
    const { data } = await store
      .dispatch('advertising/mpQrcode', {
        path: props.path,
        appId: props.modalData.appId
      })
      .finally(() => {
        loading.value = false
      })

    mpQrcode.value = data
  }
</script>

<style scoped lang="scss">
  .box {
    width: 400px;
    height: 400px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
